<template>
    <div class="personalAccount">
        <div class="experience_inputs">
            <div class="add_item">
                <div class="my_account">我的账户</div>
                <div class='balance'>账户余额：<p><span>{{personalAccount}}</span>元</p></div>
            </div>
        </div>
         <div class="products">
            <div class="pro_title">产品</div>

            <div class="product_wrap">
                <div v-for='(item,index) in cardsList' :key='index'>
                    <div class="product_item" :style="'border: solid 1px'+item.color">
                        <div class="car_classify"><img :src='item.img'></div>
                        <div class="car_name" :style="'color:'+ item.color">{{item.productname}}</div>
                        <div class="bottom_color" :style="'background-color:'+item.color">
                            <div class="car_price">￥{{item.price}} <span>数量:{{item.leftnum}}</span> </div> 
                            <div class="carbuy_btn">
                                <img src="../../static/imgs/shopcar.png">
                                <span @click="buyCard(item.productid)">购买</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <el-dialog title="购买" :modal=false :visible.sync="dialogFormVisible">
                <el-form :model="form">
                    <el-form-item label-width="80px">
                        <div class="member_info">学员信息</div>
                    </el-form-item>
                    <el-form-item label="线下校：" :label-width="formLabelWidth">
                        <el-input v-if='form.nickname' v-model="form.nickname" disabled></el-input>
                        <el-input v-if='!form.nickname' v-model="form.realname" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="账户名：" :label-width="formLabelWidth">
                        <el-input v-model="form.realname" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="手机号：" :label-width="formLabelWidth">
                        <el-input v-model="form.mobile" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="产品类型：" :label-width="formLabelWidth">
                        <el-input v-model="form.productname" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="购买数量：" :label-width="formLabelWidth">
                        <el-input v-model="form.acount"></el-input>
                    </el-form-item>                    
                </el-form>
                
                <div slot="footer" class="dialog-footer">
                    <el-button class="dialog_close" @click="dialogFormVisible = false">取 消</el-button>
                    <el-button class="dialog_confirm" type="primary" @click="submitForm">确 定</el-button>
                </div>
            </el-dialog>

    </div>
</template>
<script>
    // window.onresize=function(){
    //     var window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                                   
    //     if(window_width < 1920) {
    //         var wrap=document.getElementsByClassName('product_item')
    //         for(let i=0;i<wrap.length;i++){
    //             wrap[i].style.transform='scale('+window_width/1920+')'
    //             console.log(wrap[i])
    //         }
    //         // wrap.style.transform='scale('+window_width/1920+')'
    //     }
    // }
    // document.onready=function(){

    //     console.log(123)
    //     var window_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
                                   
    //     if(window_width < 1920) {
    //         var wrap=document.getElementsByClassName('product_item')
    //         for(let i=0;i<wrap.length;i++){
    //             wrap[i].style.transform='scale('+window_width/1920+')'
    //             console.log(wrap[i])
    //         }
    //         // wrap.style.transform='scale('+window_width/1920+')'
    //     }
    // }
    import base from '../api/base.js'
    export default{
        data(){
            return{
                formLabelWidth: '200px',
                cardsList:[],
                cardId:'',
                dialogFormVisible:false,
                form:{
                    nickname:'',
                    realname:'',
                    mobile:'',
                    productname:'',
                    acount:''
                },
                personalAccount:''
            }
        },
        methods:{
            getCards(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/account-info",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.cardsList=res.data.data.accountinfo
                        this.personalAccount=res.data.data.agentinfo.account
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                });
            },
            buyCard(e){
                this.cardId=e
                this.dialogFormVisible=true
                this.getCardInfo()
            },
            getCardInfo(){
                 this.$axios({
                    url: base.baseUrl+"/school/agent/get-product-info",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        productid:this.cardId
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.data.code==200){
                        this.form.nickname=res.data.data.agent.nickname
                        this.form.realname=res.data.data.agent.realname
                        this.form.mobile=res.data.data.agent.mobile
                        this.form.productname=res.data.data.product.productname
                    }else if(res.data.code==-2){
                        this.$router.push('/login')
                    }
                });
            },
            submitForm(){
                this.$axios({
                    url: base.baseUrl+"/school/agent/buy-product",
                    method: "POST",
                    header: { 'content-type': 'application/x-www-form-urlencoded' },
                    data:{
                        token:localStorage.token,
                        productid:this.cardId,
                        num:this.form.acount
                    },
                    transformRequest: [function (data) {
                        let ret = ''
                        for (let it in data) {
                            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                        }
                        return ret
                    }],
                }).then(res => {
                    if(res.status==500){
                        this.alertTip('服务器出错')
                    }else{
                        console.log(res.status)
                        this.alertTip(res.data.msg)
                        if(res.data.code==200){
                            this.getCards()
                            this.dialogFormVisible=false
                        }
                    }
                    
                });
            },
            alertTip(msg){
                this.$alert(msg, '提示', {
                    confirmButtonText: '确定',
                    callback: action => {
                        this.$message({
                            type: 'info',
                        });
                    }
                });
            }
        },
        created(){
            this.getCards()
        }
    }
</script>
<style lang="less" scoped>
    .experience_inputs{
        height: 60px;
        box-sizing: border-box;
        background: #f5f5f5;
        padding-top: 10px;
        
        .add_item{
            width: 100%;
            padding:8px;
            letter-spacing: 1px;
            .my_account{
                float:left;
            }
            .balance{
                float:right;
                p{
                    display: inline;
                    color:#ff4a61;
                    span{
                        font-size: 22px;
                    }
                }
            }
        }
    }
    .products{
        background: #ffffff;
        text-align: center;
        padding: 20px 104px;
        .pro_title{
            font-size: 28px;
            letter-spacing: 10px;
            margin-bottom: 30px;
        }
        .product_wrap{
            display:flex;
            flex-wrap:wrap;
            // justify-content: space-between;
        }
        .product_wrap>div{
            width: 20%;
            position: relative;
            height: 220px
        }
    }
    @media screen and (min-width: 768px) {
           .product_item{
               transform: scale(0.4)
           }
           .product_wrap>div{
                height: 90px
            }
        }
    @media screen and (min-width: 1024px) {
            .product_item{
                transform: scale(0.5)
            }
             .product_wrap>div{
                height: 110px
            }
    }
    @media screen and (min-width: 1086px) {
            .product_item{
                transform: scale(0.55)
            }
             .product_wrap>div{
                height: 125px
            }
    }
    @media screen and (min-width: 1200px) {
            .product_item{
                transform: scale(0.6)
            }
             .product_wrap>div{
                height: 140px
            }
    }
    @media screen and (min-width: 1280px) {
        .product_item{
            transform: scale(0.65)
        }
         .product_wrap>div{
                height: 150px
            }
    }
    @media screen and (min-width: 1350px) {
        .product_item{
            transform: scale(0.7)
        }
         .product_wrap>div{
                height: 160px
            }
    }
    @media screen and (min-width: 1440px) {
        .product_item{
            transform: scale(0.8)
        }
         .product_wrap>div{
                height: 200px
            }
    }
    @media screen and (min-width: 1680px) {
        .product_item{
            transform: scale(1)
        }
         .product_wrap>div{
                height: 220px
            }
    }
    .product_item{
        position: absolute;
        top: 0;
        left: 0;
        width: 250px;
        background-color: #ffffff;
        border-radius: 10px;
        padding-top: 24px;
        margin:0 30px 30px 0;
        transform-origin: left top;
    }
    .car_name{
        font-size: 24px;
        line-height: 48px;
    }
    .bottom_color{
        height: 30px;
        border-radius:0 0 6px 6px;
        color: #ffffff;
        display: flex;
        padding: 10px 6px;
    }
    .car_classify img{
        width: 86px;
        height: 60px;
    }
    .bottom_color .car_price{
        font-size: 20px;
        margin-right: 12px;
    }
    .bottom_color .car_price span{
        font-size: 13px;
    }
    .carbuy_btn{
        width: 76px;
        height: 30px;
        box-sizing: border-box;
        border-radius: 5px;
        font-size: 16px;
        color: #ffffff;
        border: solid 1px #ffffff;
        padding: 3px;
    }
</style>
